<template>
  <div class="video-player">
    <video :src="videoUrl" controls autoplay  ref="videoRef"></video>
  </div>
</template>

<script setup lang="ts">
import { defineProps,ref } from "vue";

// 定义 props，接收视频 URL
const props = defineProps({
  videoUrl: {
    type: String,
    required: true,
  },
});

// 获取 video 元素
const videoRef = ref<HTMLVideoElement | null>(null);
// 提供给父组件调用的方法
const stopVideo = () => {
  if (videoRef.value) {
    videoRef.value.pause();

  }
};

// 将方法暴露给父组件
defineExpose({ stopVideo })

</script>

<style scoped lang="scss">
.video-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  video {
    width: 100%;
    max-width: 800px;
    border-radius: 8px;
  }

  button {
    padding: 8px 16px;
    background-color: #409eff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;

    &:hover {
      background-color: #66b1ff;
    }
  }
}
</style>
